<template>
  <transition name="zoom-fade" mode="out-in">
    <div class="loginFlex">
      <div class="box">
        <el-form
          ref="formRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="ruleForm.username"
              type="text"
              autocomplete="off"
            ></el-input>
            <div>{{ ruleForm.username }}</div>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              v-model="ruleForm.pass"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="再次确认密码" prop="checkPass">
            <el-input
              v-model="ruleForm.checkPass"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="Emails">
            <el-input v-model="ruleForm.Emails"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button
              @click="resetForm('reset')"
              v-if="clickType == 'reset'"
              >重置</el-button
            >
            <el-button @click="register('register')" v-if="clickType == 'register'">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import loginForm from "./loginForm";
export default defineComponent({
  setup() {
    //也可以不用写setup函数 在script里面写一个setup 就不用每个return回去
    const formRef = ref<any>(null);
    /*ref和reactive触发响应式的一种，其中
    ①reactive中必须存放对象（json、数组等），不能存放基本数据类型
    ②ref则可以存放基本数据类型【注：ref本质还是reactive】ref(5)使5为响应式数据，一旦改变这个数据，会触发更新
    */
    let ruleForm: loginForm = reactive({
      pass: "",
      checkPass: "",
      Emails: "",
      username: "",
    });
    let clickType = ref('reset')
    const chenEmail = (rule: any, value: any, callback: any) => {
      if (!value) {
        return callback(new Error("请输入邮箱"));
      }
      setTimeout(() => {
        const Bool: boolean = new RegExp(
          "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$"
        ).test(value);
        console.log("Bool", Bool);
        if (Bool) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 0);
    };
    const validatePass = (rule: any, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (ruleForm.checkPass !== "") {
          formRef.value.validateField("checkPass");
        }
        callback();
      }
    };
    const validatePass2 = (rule: any, value: string, callback: any) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== ruleForm.pass) {
        callback(new Error("两次密码不匹配"));
      } else {
        callback();
      }
    };
    const submitForm = (formName: any) => {
      console.log("1111", formName, formRef.value);
      formRef.value.validate((valid: any) => {
        if (valid) {
          ElMessage({
            message: "登录成功",
            center: true,
            type: "success",
            duration: 1000,
          });
          formRef.value.resetFields();
        } else {
          console.log("登录错误");
          return false;
        }
      });
    };
    const register=(res:any)=>{
      console.log(111,res)
      clickType.value='reset'
      console.log('clickType',clickType)
    }
    const resetForm = (formName: any) => {
      formRef.value.resetFields();
      console.log("1111", formName, formRef.value);
      clickType.value='register'
      console.log('clickType',clickType)
    };
    const rules = {
      username: [{ required: "required", trigger: "blur" }],
      pass: [{ validator: validatePass, trigger: "blur" }],
      checkPass: [{ validator: validatePass2, trigger: "blur" }],
      Emails: [{ validator: chenEmail, trigger: "blur" }],
    };
    return {
      ruleForm,
      submitForm,
      resetForm,
      formRef,
      rules,
      clickType,
      register
    };
  },
});
</script>
<style lang="less" scoped>
.loginFlex {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  // overflow: hidden;
  background: url('../../assets/bcg_login.jpg') no-repeat;
  background-size:100% 100%;
  // opacity:0.60;
  color: white !important;
  .box {
    width: 500px;
    height: 229px;
    margin: auto//用于分配剩余空间 使其垂直居中 https://www.jianshu.com/p/a72250bfdbe1
  }
}
</style>
